<template>
  <div
    ref="main"
    id="main"
    style="width: 100%; height: 100%; margin: auto"
  ></div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Object,
    },
  },
  mounted() {

    // this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs.main);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          icon: "rect",
          itemGap: 20,
          itemHeight: 12,
            itemWidth: 12,
          textStyle: {
            fontSize: 12, //字体大小
            color: "#38BBEE", //字体颜色
          },
        },
        grid: {
          top: "22%",
          left: "3%",
          right: "4%",
          bottom: "7%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.dataList.quarterStr,
            // data: that.data.map((v) => v.融资城市),
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: '总和',
            min: 0,
            // max: 200,
            // interval: (200 - 0) / 5,
            color: "#38BBEE",
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            // name: '增长率',
            min: 0,
            // max: 200,
            // interval: (200 - 0) / 5,
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                color: "#666",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#666",
              },
            },
          },
        ],
        series: [
          {
            name: "风险指数",
            type: "line",
            symbol: "none",
            smooth: true,
            barWidth: 10,
            data: this.dataList.riskIndex,
            // data: that.data.map((v) => v.近3个月内有融资企业数量),
            itemStyle: {
              normal: {
                color: "#2A66F6",
              },
            },
          },
          {
            name: "经营指数",
            type: "line",
            symbol: "none",
            smooth: true,
            barWidth: 10,
            data: this.dataList.operaIndex,
            // data: that.data.map((v) => v.IPO辅导企业),
            itemStyle: {
              normal: {
                color: "#7256EC",
              },
            },
          },
          {
            name: "景气指数",
            data: this.dataList.proIndex,
            // data: that.data.map((v) => v.A股上市企业),
            type: "line",

            smooth: true,
            symbol: "none",
            lineStyle: {
              normal: {
                color: "#8FCCF0",
              },
            },
          },
          {
            name: "用工指数",
           data: this.dataList.employIndex,
            // data: that.data.map((v) => v.A股上市企业),
            type: "line",

            smooth: true,
            symbol: "none",
            lineStyle: {
              normal: {
                color: "#CA986B",
              },
            },
          },
          {
            name: "综合指数",
            data: this.dataList.comIndex,
            // data: that.data.map((v) => v.A股上市企业),
            type: "line",

            smooth: true,
            symbol: "none",
            lineStyle: {
              normal: {
                color: "#7DFBC3",
              },
            },
          },
          ,
          // {
          //   name: "景气指数",
          //   data: [250, 130, 324, 18, 335, 247, 160],
          //   // data: that.data.map((v) => v.A股上市企业),
          //   type: "line",

          //   smooth: true,
          //   symbol: "none",
          //   lineStyle: {
          //     normal: {
          //       color: "#BC93BC",
          //     },
          //   },
          // },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      var currentIndex = -1;
  
      //  let myChart = echarts.getInstanceByDom(document.getElementById("chart-panel"))
      var dataLen = option.series[0].data.length;
      var timer = 0;
      setInterval(() => {
        //  计时器增加
        timer++;
        // if (timer == 5) {
        //   for (let index in arr) {
        //     arr[index].value = (Math.random() * 50 + 100).toFixed(0);
        //   }
        //   myChart.setOption({
        //     series: [
        //       {
        //         data: arr
        //       }
        //     ]
        //   });
        //   timer = 1;
        // }
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 2000000);
    },
  },
};
</script>

<style></style>
